<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Главная</title>

  <!-- подключение favicon -->
  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">

  <!-- подключение custom style css -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">

  <!-- подключение шрифтов -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito" type="text/css">

  <!-- подключение библиотеки fontawesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
</head>

<body>
  <!-- header section ______________________________ -->
  <header class="header">
    <div class="container header__wrapper">
      <div class="logo">
        <picture class="logo__img">
          <source srcset="img/logo/logo.avif" type="image/avif">
          <source srcset="img/logo/logo.webp" type="image/webp">
          <img src="img/logo/logo.png" class="logo__smail" alt="Логотип" loading="lazy">
        </picture>

        <picture class="logo__img-user">
          <source srcset="img/logo/logo_user.avif" type="image/avif">
          <source srcset="img/logo/logo_user.webp" type="image/webp">
          <img src="img/logo/logo_user.jpg" class="logo__img-photo" alt="Логотип" loading="lazy" width="100">
        </picture>

        <a aria-label="Телефон" href="tel:+79857788338" class="logo__phone">tel:&nbsp;+7(985)778-8338</a>
        <span class="logo__click">&ensp;&#128072;</span>
      </div>

      <input type="checkbox" class="menu" id="menu">
      <label for="menu">
        <i class="fas fa-bars menu__item"></i>
        <i class="fas fa-times menu__item"></i>
      </label>

      <nav class="navbar">
        <ul class="list">
          <li><a href="index.html" class="list__item" id="home">Главная</a></li>
          <li><a href="about.html" class="list__item" id="about">Обо мне</a></li>
          <!-- <li><a href="stub.html" class="list__item" id="services">Услуги</a></li> -->
          <!-- <li><a href="stub.html" class="list__item" id="projects">Проекты</a></li> -->
          <li><a href="contact.html" class="list__item" id="contact">Контакты</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main id="main">
    <!-- content section ______________________________ -->
    <section>
      <div class="container content" id="content">
        <div class="content__box">
          <h1 class="content__title-hello">Здравствуйте, меня зовут</h1>
          <h2 class="content__title-name">Андрей Федюкин</h2>
          <h3 class="content__title-ticker">я&ensp;<span class="content__typed-text"></span></h3>

          <p class="content__text">Я создаю интересные и доступные веб-сайты для людей. Стараюсь писать код понятным
            и читабельным для своих коллег. В работе с кодом использую методологию БЭМ. Владею всеми необходимыми
            навыками
            для вёрстки сайтов. Постоянно нахожусь в процессе самообучения.</p>

          <p class="content__text">Обратившись ко мне, Вы приобретёте надежного Партнера и исполнителя Ваших
            желаний&nbsp;&#128521;. Позвоните или напишите мне, Вам понравится&nbsp;&#128522;.</p>
        </div>

        <div class="img-box">
          <picture>
            <source srcset="img/user_photo.avif" type="image/avif">
            <source srcset="img/user_photo.webp" type="image/webp">
            <img src="img/user_photo.jpg" class="img-box__photo" alt="user_photo" loading="lazy" width="380">
          </picture>
        </div>
      </div>
    </section>

    <!-- contacts section ______________________________ -->
    <section>
      <div class="container contacts" id="contacts">

        <a aria-label="github" href="https://github.com/AndreyFedyukin/" target="_blank" class="contacts__link">
          <svg class="svg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"
            color="#1e90ff" fill="none">
            <path
              d="M6.51734 17.1132C6.91177 17.6905 8.10883 18.9228 9.74168 19.2333M9.86428 22C8.83582 21.8306 2 19.6057 2 12.0926C2 5.06329 8.0019 2 12.0008 2C15.9996 2 22 5.06329 22 12.0926C22 19.6057 15.1642 21.8306 14.1357 22C14.1357 22 13.9267 18.5826 14.0487 17.9969C14.1706 17.4113 13.7552 16.4688 13.7552 16.4688C14.7262 16.1055 16.2043 15.5847 16.7001 14.1874C17.0848 13.1032 17.3268 11.5288 16.2508 10.0489C16.2508 10.0489 16.5318 7.65809 15.9996 7.56548C15.4675 7.47287 13.8998 8.51192 13.8998 8.51192C13.4432 8.38248 12.4243 8.13476 12.0018 8.17939C11.5792 8.13476 10.5568 8.38248 10.1002 8.51192C10.1002 8.51192 8.53249 7.47287 8.00036 7.56548C7.46823 7.65809 7.74917 10.0489 7.74917 10.0489C6.67316 11.5288 6.91516 13.1032 7.2999 14.1874C7.79575 15.5847 9.27384 16.1055 10.2448 16.4688C10.2448 16.4688 9.82944 17.4113 9.95135 17.9969C10.0733 18.5826 9.86428 22 9.86428 22Z"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </a>

        <button aria-label="Форма обратной связи" class="btn contacts__btn" id="open-modal-btn">
          Напишите&nbsp;мне
        </button>

        <a aria-label="telegram" href="https://t.me/andrey_fedyukin/" target="_blank" class="contacts__link">
          <svg class="svg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"
            color="#1e90ff" fill="none">
            <path
              d="M11.9854 15.4083L15.2268 19.0936C16.4277 20.4589 17.0282 21.1416 17.6567 20.9754C18.2852 20.8092 18.5008 19.9108 18.9318 18.1138L21.3229 8.1459C21.9868 5.37832 22.3187 3.99454 21.5808 3.312C20.843 2.62947 19.564 3.13725 17.0061 4.15282L5.13876 8.86449C3.09293 9.67674 2.07001 10.0829 2.00507 10.7808C1.99842 10.8522 1.99831 10.9241 2.00474 10.9955C2.06754 11.6937 3.08921 12.1033 5.13255 12.9223C6.05838 13.2934 6.5213 13.479 6.8532 13.8344C6.89052 13.8743 6.9264 13.9157 6.96078 13.9584C7.26658 14.3384 7.39709 14.8371 7.65808 15.8344L8.14653 17.701C8.4005 18.6715 8.52749 19.1568 8.86008 19.223C9.19267 19.2891 9.48225 18.8867 10.0614 18.0819L11.9854 15.4083ZM11.9854 15.4083L11.6676 15.0771C11.3059 14.7001 11.1251 14.5117 11.1251 14.2775C11.1251 14.0433 11.3059 13.8548 11.6676 13.4778L15.2406 9.75409"
              stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </a>

        <a aria-label="linkedin" href="https://linkedin.com/in/andrey-fedyukin/" target="_blank" class="contacts__link">
          <svg class="svg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"
            color="#1e90ff" fill="none">
            <path
              d="M4.5 9.5H4C3.05719 9.5 2.58579 9.5 2.29289 9.79289C2 10.0858 2 10.5572 2 11.5V20C2 20.9428 2 21.4142 2.29289 21.7071C2.58579 22 3.05719 22 4 22H4.5C5.44281 22 5.91421 22 6.20711 21.7071C6.5 21.4142 6.5 20.9428 6.5 20V11.5C6.5 10.5572 6.5 10.0858 6.20711 9.79289C5.91421 9.5 5.44281 9.5 4.5 9.5Z"
              stroke="currentColor" stroke-width="1.5" />
            <path
              d="M6.5 4.25C6.5 5.49264 5.49264 6.5 4.25 6.5C3.00736 6.5 2 5.49264 2 4.25C2 3.00736 3.00736 2 4.25 2C5.49264 2 6.5 3.00736 6.5 4.25Z"
              stroke="currentColor" stroke-width="1.5" />
            <path
              d="M12.326 9.5H11.5C10.5572 9.5 10.0858 9.5 9.79289 9.79289C9.5 10.0858 9.5 10.5572 9.5 11.5V20C9.5 20.9428 9.5 21.4142 9.79289 21.7071C10.0858 22 10.5572 22 11.5 22H12C12.9428 22 13.4142 22 13.7071 21.7071C14 21.4142 14 20.9428 14 20L14.0001 16.5001C14.0001 14.8433 14.5281 13.5001 16.0879 13.5001C16.8677 13.5001 17.5 14.1717 17.5 15.0001V19.5001C17.5 20.4429 17.5 20.9143 17.7929 21.2072C18.0857 21.5001 18.5572 21.5001 19.5 21.5001H19.9987C20.9413 21.5001 21.4126 21.5001 21.7055 21.2073C21.9984 20.9145 21.9985 20.4432 21.9987 19.5006L22.0001 14.0002C22.0001 11.515 19.6364 9.50024 17.2968 9.50024C15.9649 9.50024 14.7767 10.1531 14.0001 11.174C14 10.5439 14 10.2289 13.8632 9.995C13.7765 9.84686 13.6531 9.72353 13.505 9.63687C13.2711 9.5 12.9561 9.5 12.326 9.5Z"
              stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
          </svg>
        </a>

        <a class="btn contacts__btn-resume" href="docs/A.Fedyukin.pdf" download="Андрей Федюкин"
          aria-label="Ссылка на резюме" target="_blank">
          Скачать&nbsp;резюме
        </a>

        <a aria-label="Телефон" href="tel:+79857788338" target="_blank" class="contacts__link">
          <svg class="svg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"
            color="#1e90ff" fill="none">
            <path
              d="M4.74038 14.3685L6.69351 12.9816C7.24445 12.5904 7.80305 12.3282 8.44034 12.1585C9.17201 11.9636 9.5 11.5644 9.5 10.711C9.5 8.54628 14.5 8.31594 14.5 10.711C14.5 11.5644 14.828 11.9636 15.5597 12.1585C16.202 12.3295 16.7599 12.5934 17.3065 12.9816L19.2596 14.3685C20.1434 14.9961 20.5547 15.2995 20.7842 15.7819C21 16.2358 21 16.768 21 17.8324C21 19.7461 21 20.703 20.4642 21.3164C19.8152 22.0593 18.128 21.9955 17.0917 21.9955H6.90833C5.87197 21.9955 4.21909 22.0986 3.5358 21.3164C3 20.703 3 19.7461 3 17.8324C3 16.768 3 16.2358 3.21584 15.7819C3.44526 15.2995 3.85662 14.9961 4.74038 14.3685Z"
              stroke="currentColor" stroke-width="1.5" />
            <path
              d="M14 17C14 18.1046 13.1046 19 12 19C10.8954 19 10 18.1046 10 17C10 15.8954 10.8954 15 12 15C13.1046 15 14 15.8954 14 17Z"
              stroke="currentColor" stroke-width="1.5" />
            <path
              d="M6.96014 3.69772C5.6417 4.07415 4.69384 4.54112 3.82645 5.10455C2.45318 5.9966 1.86443 7.60404 2.02607 9.15513C2.09439 9.81068 2.62064 10.1241 3.23089 9.95455C3.69451 9.82571 4.15888 9.7003 4.61961 9.56364C5.96706 9.16397 6.28399 8.67812 6.47124 7.29885L6.96014 3.69772ZM6.96014 3.69772C10.2186 2.76743 13.7814 2.76743 17.0399 3.69772M17.0399 3.69772C18.3583 4.07415 19.3062 4.54112 20.1735 5.10455C21.5468 5.9966 22.1356 7.60404 21.9739 9.15513C21.9056 9.81068 21.3794 10.1241 20.7691 9.95455C20.3055 9.82571 19.8411 9.7003 19.3804 9.56364C18.0329 9.16397 17.716 8.67812 17.5288 7.29885L17.0399 3.69772Z"
              stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
          </svg>
        </a>

      </div>
    </section>

    <!-- modal section ______________________________ -->
    <section>
      <!-- modal окно -->
      <div class="modal" id="my-modal">
        <div class="modal__box">

          <!-- форма для отправки сообщение на почту -->
          <form id="form" class="form" autocomplete="off">
            <h2 class="form__title">Напишите мне сообщение</h2>

            <div class="form__box">
              <input class="form__input" type="text" id="name" name="name" placeholder="Имя" autocomplete="off">
            </div>

            <div class="form__box">
              <input class="form__input" type="tel" id="tel" name="tel" placeholder="+7(___)___-__-__"
                autocomplete="off">
            </div>

            <div class="form__box">
              <textarea class="form__input" rows="5" name="msg" id="msg" placeholder="Сообщение"
                maxlength="1000"></textarea>
            </div>

            <div class="group-btn">
              <button aria-label="Отправит" class="btn form__btn" type="submit">
                Отправить &#128515;
              </button>

              <button aria-label="Отменить" class="btn form__btn-close" id="close-modal-btn">
                &#128546; Отменить
              </button>
            </div>
          </form>

        </div>
      </div>
    </section>
  </main>

  <!-- footer ______________________________ -->
  <footer>
    <div class="container footer__wrapper">

      <p class="footer__footnote">
        &copy;&ensp;2021-2024&ensp;Andrey&ensp;Fedyukin
      </p>

      <!-- Yandex.Metrika informer -->
      <a class="footer__counter" href="https://metrika.yandex.ru/stat/?id=97183844&amp;from=informer" target="_blank"
        rel="nofollow">
        <img src="https://informer.yandex.ru/informer/97183844/1_0_263040FF_061020FF_1_pageviews"
          style="width:80px; height:15px; border:0;" alt="Яндекс.Метрика"
          title="Яндекс.Метрика: данные за сегодня (просмотры)" class="ym-advanced-informer" data-cid="97183844"
          data-lang="ru" />
      </a>
      <!-- /Yandex.Metrika informer -->
      <!-- Yandex.Metrika counter -->
      <script>
        (function (m, e, t, r, i, k, a) { m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) }; m[i].l = 1 * new Date(); for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } } k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a) })(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(97183844, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true }); 
      </script>
      <noscript>
        <div>
          <img src="https://mc.yandex.ru/watch/97183844" style="position:absolute; left:-9999px;" alt="" />
        </div>
      </noscript> <!-- /Yandex.Metrika counter -->

    </div>
  </footer>

  <!-- подключение библиотеки typed.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.1.0/typed.umd.js"></script>

  <!-- подключение библиотеки scrollreveal -->
  <script src="https://unpkg.com/scrollreveal"></script>

  <!-- подключение библиотеки inputmask -->
  <script src="js/inputmask.min.js"></script>

  <!-- подключение библиотеки валидации just-validate -->
  <script src="js/just-validate.min.js"></script>

  <!-- подключение основного файла main.js -->
  <script defer src="js/main.js"></script>
</body>

</html>